<template>
  <div class="box">
    <div class="top">
      <HdView />
    </div>
    <div class="bk">
      <div class="main">
        <div class="title">
          <h1>问卷标签</h1>
          <div class="creator">
            <h2>创建者：{{ creator }}</h2>
          </div>
        </div>

        <div class="content">
          <div class="qs">
            <Radio />
            <CheckBox />
            <Textqs />
            <Textareaqs />
            <Fileqs />
          </div>

          <div class="btn">
            <span> <button class="fabu">发布</button></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import HdView from "@/components/HdView";
  import Radio from "@/components/Radio";
  import CheckBox from "@/components/CheckBox";
  import Textqs from "@/components/Text";
  import Textareaqs from "@/components/Textarea";
  import Fileqs from "@/components/File";

  export default {
    data() {
      return {
        creator: "一个人",
      };
    },
    components: {
      HdView,
      CheckBox,
      Radio,
      Textqs,
      Textareaqs,
      Fileqs,
    },
    methods: {},
  };
</script>


<style lang="less">
  /* * {
  color: rgba(24, 32, 56, 100);
  font-size: 20px;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}

.bk {
  background-image: url("#");
  background-repeat: no-repeat;
  background-size: 1440px 908px;
  background-attachment: fixed;
  margin: 0 auto;
}
.main {
  width: 1170px;

  line-height: 20px;
  text-align: center;
  border: 1px solid rgba(187, 187, 187, 100);
  margin: 0 auto;
}
.title {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  h1 {
    width: 200px;
    height: 30px;
    align-items: center;
  }

  .creator {
    h2 {
      margin: 10px;
    }
  }
}
.content {
  margin: 0 auto;
  background: rgb(197, 184, 163);
  width: 1040px;

  border-width: 20px;
  padding: 20px;
  input {
    width: auto;
    height: 30px;
  }
  .btn {
      height: 70px;
      width:100%;
       display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    span{
        
        width: 301px;
        height: 51px;
        margin: 10px;

    }
    .fabu {
 position: relative;
      width: 300px;
      height: 50px;
      border-radius: 4px;
      background-color: rgba(255, 227, 0, 100);
      color: rgba(255, 255, 255, 100);
      font-size: 28px;
      text-align: center;
      box-shadow: 0px 2px 6px 0px rgba(24, 32, 56, 100);
      font-family: Microsoft Yahei;
    }
    .baocun {
    position: relative;
      width: 300px;
      height: 50px;
      border-radius: 4px;
      background-color: rgba(24, 32, 56, 100);
      color: rgba(255, 255, 255, 100);
      font-size: 28px;
      text-align: center;
      box-shadow: 0px 2px 6px 0px rgba(24, 32, 56, 100);
      font-family: Microsoft Yahei;
    }
  }
} */
  .box {
    width: 100%;
    height: 100%;

    .bk {
      width: 100%;
      height: 100%;
      background-image: url(../assets/images/index-bgi.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-attachment: fixed;
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;

      .main {
        margin: 0;
        background: #fff;
        width: 90vw;

        .title {
          h1 {
            font-size: 28px;
            font-weight: 500;
            text-align: center;
            margin-top: 3vw;
          }

          .creator {
            float: right;
            margin-right: 10vw;

            h2 {
              font-size: 15px;
              font-weight: 500;
            }
          }

        }

        .content {
          .btn {
            margin-top: 3vh;
            width: 100%;
            display: flex;
            flex-flow: row nowrap;
            justify-content: center;

            .fabu {
              width: 230px;
              height: 35px;
              border-radius: 4px;
              background-color: rgba(255, 227, 0, 100);
              color: rgba(255, 255, 255, 100);
              font-size: 20px;
              text-align: center;
              box-shadow: 0px 2px 6px 0px rgba(24, 32, 56, 100);
            }


          }

        }
      }
    }

  }
</style>